<template>
	<view>
		<view class="main">
			<view class="order_detail">
				<view class="order_img">
					<image class="img" :src="item.courseCover" mode=""></image>
				</view>
				<view class="order_font">
					<view class="title">
						<text>{{item.cousrName}}</text>
					</view>
					<view class="price">
						<text>￥{{item.unitPrice}}</text>
					</view>
				</view>
			</view>
			<view class="order_status">
				<view class="item" v-if="item.payStatusWord === '已完成'">
					<text>实付金额:</text>
					<text class="price">￥{{item.unitPrice}}</text>
				</view>
				<view class="item">
					<text>订单号:</text>
					<text class="content">{{item.sn}}</text>
				</view>
				<view class="item">
					<text>下单时间:</text>
					<text class="content">{{item.createTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{}
			}
		},
		onLoad(option){
			this.item = JSON.parse(option.val)
			console.log(this.item);
			uni.setNavigationBarTitle({
					title:this.getTitle(this.item.payStatusWord)
				})
		},
		methods: {
			getTitle(str){
				switch (str){
					case "已完成":
						return "交易完成"
					case "待支付":
						return "交易待支付"
					default:
						return "交易取消"
				}
			}
		}
	}
</script>

<style lang="scss">
	.main{
		margin: 24rpx 30rpx;
		padding: 12rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;
		.order_detail{
			display: flex;
			// justify-content: space-between;
			margin-bottom: 48rpx;
			.order_img{
				width: 280rpx;
				height: 188rpx;
				margin-right: 36rpx;
				border-radius: 12rpx;
				overflow: hidden;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.order_font{
				font-size: 28rpx;
				.title{
					height: 152rpx;
				}
			}
		}
		.order_status{
			.item{
				display: flex;
				justify-content: space-between;
				padding: 24rpx 0;
				font-size: 28rpx;
				.price{
					color: #F4333C;
					font-size: 32rpx
				}
				.content{
					color: #999;
				}
			}
		}
	}
</style>
